﻿
layui.use(['ajaxUtil'], function () {
    var ajaxutil = layui.ajaxUtil;
    var chartColumn;
    var chartLine;

    var loadBasicColumn = function () {
        // 基于准备好的dom，初始化echarts实例
        if (chartColumn !== null && chartColumn !== undefined) {
            chartColumn.clear();
        }
        chartColumn = echarts.init(document.getElementById('sn_dv_chartColumnar_main'));

        var option = {
            color: ['#3398DB'],
            title: {
                text: '员工学历人数统计'
            },
            tooltip: {
                trigger: 'axis'
                , formatter: function (params) {
                    //console.log(params);
                    var xText = params[0].name;
                    var yValue = params[0].value;
                    var marker = params[0].marker;
                    return xText + '<br/> ' + marker + yValue + '人';
                }
            },
            xAxis: {
                type: 'category',
                data: ['初中', '高中', '大专', '本科', '博士']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290]
                , type: 'bar'
            }]
        };

        chartColumn.setOption(option, true);
    }

    var loadBasicLine = function () {
        // 基于准备好的dom，初始化echarts实例
        if (chartLine !== null && chartLine !== undefined) {
            chartLine.clear();
        }
        chartLine = echarts.init(document.getElementById('sn_dv_chartLine_main'));

        var option = {
            color: ['#3398DB'],
            title: {
                text: '员工学历人数统计'
            },
            tooltip: {
                trigger: 'axis'
                , formatter: function (params) {
                    //console.log(params);
                    var xText = params[0].name;
                    var yValue = params[0].value;
                    var marker = params[0].marker;
                    return xText + '<br/> ' + marker + yValue + '人';
                }
            },
            xAxis: {
                type: 'category',
                data: ['初中', '高中', '大专', '本科', '博士']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290]
                , type: 'line'
            }]
        };

        chartLine.setOption(option, true);
    }

    var randomData = function () {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
            name: now.toString(),
            value: [
                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                Math.round(value)
            ]
        }
    }

    var data = [];
    var now = +new Date(1997, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var value = Math.random() * 1000;
    for (var i = 0; i < 1000; i++) {
        data.push(randomData());
    }
    var loadBasicDynamic = function () {
        // 基于准备好的dom，初始化echarts实例
        var dynamicChat = echarts.init(document.getElementById('sn_dv_chartDynamic_main'));

        var option = {
            title: {
                text: '动态数据 + 时间坐标轴'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '模拟数据',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data
            }]
        };

        dynamicChat.setOption(option, true);
        setInterval(function () {

            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }

            dynamicChat.setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);
    }

    loadBasicColumn();
    loadBasicLine();
    loadBasicDynamic();

    $('#btn_ChartColumnar_Refresh').click(function () {
        loadBasicColumn();
    });

    $('#btn_ChartLine_Refresh').click(function () {
        loadBasicLine();
    });
});